<template>
	<div>
		<div id="main"></div>
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast,getCookie} from '@/util/index'
	export default {
		data(){
			return{
				xData:"",
				yData:"",
				dpr:100,
				cHight:'',
				yHight:'',
				xHight:"",
			}
		},
		methods:{
			pdr(){
	    		var dpr= $("html").attr("data-dpr");
	    		if(dpr==1){
	    			this.cHight=4.5;
	    			this.yHight=29;
	    			this.xHight=15;
	    		}else if(dpr==2){
	    			this.cHight=9;
	    			this.yHight=58;
	    			this.xHight=30;
	    		}else if(dpr==3){
	    			this.cHight=13;
	    			this.yHight=80;
	    			this.xHight=45;
	    		}
	    	},
			init(){
				this.pdr();
				let senddata = {
					userId:window.localStorage.getItem("token"),
					plat:"mlj"
				}
				my.userUpDownProfitLatest7Days(senddata).then(res=>{
			        if(res.data.code==200){
			        	this.xData=res.data.data.xdata;
			        	this.yData=res.data.data.ydata;
			        	this.chart();
			         /*else if(res.data.code==222){
			            this.$router.push({path:'/'})*/
			        }else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        }else{
			        	 console.log(res);
			        }
			  	})
				
				
			},
			chart(){
				var Highcharts = require('highcharts/highcharts.src');
				Highcharts.chart('main',{
				    chart: {
				        type: 'line',
				        backgroundColor:'#141723',
				        marginTop: 82,
				        alignTicks: true,
				        	
				    },
				    /*inverted:{
				    	enabled: true	
				    },*/
				    legend:{
				    	 enabled: false	
				    },
				     rangeSelector: {
			            enabled: false
			        },
			        exporting: {
			            enabled: false
			        },
			        navigator: {
			            enabled: false
			        },
			        scrollbar: {
			            enabled: false
			        },
			        credits: {
			            enabled: false
			        },
			        tooltip: {
			            enabled: false
			        },
				    title: {
				    	useHTML:true,
				        text: '<p style="width:10rem;border-bottom: 1px solid #262934;text-align: center;height:1.0933rem;line-height:1.0933rem;">近7天收益增长趋势图</p>',
				        verticalAlign:"top",
				         y:0,
				        style:{
				        	color: "#fff",
				        	fontSize: "0.37333rem",
				        	lineHight: "1.093rem",
				        	marginTop: "0.2667rem",
				        	
				        	
				        	 
				        }
				    },
				   
				    xAxis: {
				    	endOnTick:true,
			            enabled:false,
			            gridLineWidth: 1,
			            gridLineColor:'#262934',
			            tickWidth: 1,
			            tickLength:10,
			            lineWidth: 1,
			            tickPixelInterval:107,
			            tickPosition:"inside",
			            gridLineWidth:'0px',
				        categories:this.xData,
				        tickmarkPlacement: 'on',
				        labels: {
				        	overflow: 'justify',
			                align: 'center',
			                x: 0,
			                y:this.xHight,
				            style:{
				                'color': '#56627c',
				                "font-size":"0.2667rem"
				            },
				        }
				    },
				    yAxis: {
				    	endOnTick:true,
			            enabled:false,
			            gridLineWidth: 1,
			            gridLineWidth:'0px',
			            gridLineColor:'#262934',
			            tickWidth: 1,
			            tickPixelInterval:this.yHight,
			            tickPosition:"inside",
			            lineWidth: 1,
				        title:null,
				        tickAmount:6,
				        showFirstLabel:false,
				        labels: {
				        	overflow: 'justify',
			                align: 'left',
			                x: 14,
			                y:5,
				            style:{
				                'color': '#56627c',
				                "font-size":"0.2667rem",
				            },
				            
				        },
				        plotLines:[{
			            	color: '#FF335B',
			                width: 2,
			                value: 112,
			                dashStyle: 'LongDash'
							            	
			            }]
				    },
				    plotOptions: {
				        line: {
				        	lineColor: "#eaeaea",
				        	lineWidth: 3,
				        	allowPointSelect:false,
				        	shadow: false,  
				            dataLabels: {
					            enabled: true,
					            align: 'center',
					            color: '#ffd900',
					            enabled : true,
					            textShadow:false,
					            style : {
					                'fontSize' : '0.2667rem',
					               ' fontWeight': 'normal',
					            },
					            y:-6,
					            
					            
					        },
				            
				            enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
				        },
				         series: {
	                        marker: {
	                            radius: 6,  //曲线点半径，默认是4
	                        }
	                    }
				    },
				    series: [{
				        name: '收益',
				        data: this.yData,
				        color:"#ffd900",
						marker:{//线上数据点  
		                    symbol:'circle',//圆点显示  
		                    radius:this.cHight,  
		                    lineWidth:3,  
		                    lineColor:'#ffd900',  
		                    fillColor:'#141723', 
		                    states:{  
		                        hover:{  
		                            enabled:false  
		                        }  
		                    }  
		                } 
				    }]
				});
				$("tspan.highcharts-text-outline").css("fill","none");
				$("tspan.highcharts-text-outline").css("stroke","none");
				
			}
		},
		mounted(){
			/*var dpr=$("html").attr("data-dpr");
			console.log(dpr);*/
			this.init();
			/*this.getPhoneType();*/
		}
	}

</script>

<style lang="less" scoped>
@import '../../less/config.less';
#main{
	width: 100%;
	height:6.24rem;
	
}
</style>